<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/js/elementui/index.css">
    <title>Title</title>
</head>
<style>
</style>
<body>
<div id="app">
    <!--选择地区查询-->
    <i class="el-icon-s-home"></i>
    <span style="height: 10px;">首页 ></span>
    <span style="height: 10px">合作申请</span>
    <el-divider><i></i></el-divider>
    <!--按时间搜索-->
    <template>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" size="small" @click="conditionQuery">搜索</el-button>
        </div>

        <!--分割线-->
        <el-divider><i></i></el-divider>
    </template>
    每页显示条数:
    <template>
        <el-input-number v-model="num" controls-position="right" @change="changePageSize" :min="1" :max="10" size="small"></el-input-number>
    </template>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;text-align: center"
                :header-cell-style="{background:'#eee',color:'#606266'}"
                :default-sort = "{prop: 'id', order: 'ascending'}"
                border>
            <el-table-column
                    prop="id"
                    sortable
                    label="序号"
                    width="180"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.companyName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="地区"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.companyProvince }}{{ scope.row.company.companyCity }}{{ scope.row.company.companyArea }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="主要经营"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.businessScope }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请状态"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px;background: #E6A23C;" v-if="scope.row.tParStatus=='已申请'">{{ scope.row.tParStatus }}</span>
                    <span style="margin-left: 10px;background: #67C23A" v-if="scope.row.tParStatus=='已同意'">{{ scope.row.tParStatus }}</span>
                    <span style="margin-left: 10px;background: #F56C6C" v-if="scope.row.tParStatus=='已拒绝'">{{ scope.row.tParStatus }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tParTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请为"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" v-if="scope.row.tParRel=='0'">客户</span>
                    <span style="margin-left: 10px" v-if="scope.row.tParRel=='1'">供应商</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tAprDesc }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary" plain
                            @click="openForm(scope.row)">审核</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="loadPage"
            :current-page="curr"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="客户信息" :visible.sync="dialogFormVisible" @close="closeForm">
        <el-form :model="par">
            <el-form-item label="客户名称" :label-width="formLabelWidth">
                <el-input v-model="par.company.companyName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="主要经营" :label-width="formLabelWidth">
                <el-input v-model="par.company.businessScope" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="申请状态" :label-width="formLabelWidth">
                <el-input v-model="par.tParStatus" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="par.tAprDesc" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="审核状态" :label-width="formLabelWidth">
                <el-input v-model="par.tParStatus2" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="设为：">
                <template>
                    <el-radio v-model="par.tParRel" label="0">客户</el-radio>
                    <el-radio v-model="par.tParRel" label="1">供应商</el-radio>
                </template>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="success" @click="modifySuccess">通 过</el-button>
            <el-button type="danger" @click="modifyDefault">拒 绝</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script src="/js/area/area.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                value1:'',
                total:0,
                pageSize:null,
                curr:1,
                num:7,
                tableData: null,
                par:{
                    id:'',
                    company:{
                        id:'',
                        companyName:'',
                        businessScope:'',
                    },
                    tParStatus:'',
                    tParStatus2:'',
                    staffName:'',
                    tParTime:'',
                    tAprDesc:'',
                    tParComA:'',
                    tParComB:'',
                    tParRel:''
                },
                dialogFormVisible: false,
                formLabelWidth:"120px",
                radio:''
            }
        },
        methods: {
            handleEdit(row) {
                this.par=row;
                this.dialogFormVisible=true;
            },
            loadPage(curr){
                axios.get('/pars?curr='+this.curr+"&size="+this.num).then(value => {
                    if (value.data.code==1){
                        this.num=value.data.data.size;
                        this.tableData=value.data.data.records;
                        this.curr=value.data.data.current;
                        this.pageSize=value.data.data.size;
                        this.tatal=value.data.data.tatal;
                    }
                })
            },
            //条件查询
            conditionQuery(){
                axios.get('/par/conditionQuery/'+this.value1[0]+"/"+this.value1[1]).then(value => {
                    if (value.data.code==1){
                        this.tableData=value.data.data;
                    }
                })
            },
            //每页显示条数
            changePageSize(curr){
                this.loadPage(this.curr);
            },
            //打开FORM
            openForm(row){
                this.par=row;
                this.dialogFormVisible=true;
            },
            //审核通过
            modifySuccess(){
                this.par.tAprDesc='';
                this.par.tParStatus='已同意';
                this.par.tParStatus2='通过';
                console.log(this.par);
                axios.put('/par',this.par).then(value => {
                    if (value.data.code==1){
                        this.$message("审核成功");
                        this.dialogFormVisible=false;
                        this.loadPage(1);
                    }
                })
            },
            //审核拒绝
            modifyDefault(){
                if (this.par.tAprDesc==''){
                    this.$message("请填拒绝理由");
                }else {
                    this.par.tParStatus='已拒绝';
                    this.par.tParStatus2='拒绝';
                    axios.put('/par',this.par).then(value => {
                        if (value.data.code==1){
                            this.$message("审核成功");
                            this.dialogFormVisible=false;
                            this.loadPage(1);
                        }
                    })
                }
            },
            //关闭form清空数据
            closeForm(){
                this.customer={
                    id:'',
                    name:'',
                    address:'',
                    telephone: '',
                    email:'',
                    remark:'',
                    business:'',
                    createTime:null,
                    updateTime:null,
                    createUserId:'',
                    updateUserId:'',
                    siteId:''
                }
            },
            //跟新
            handleEdit(row){
                this.province='';
                this.city='';
                this.area='';
                this.customer=row;
                this.dialogFormVisible=true;
            },
            //删除
            handleDelete(row){
                axios.delete("/par/"+row.id).then(value => {
                    if (value.data.code==1){
                        this.$message("删除成功");
                        this.loadPage(1);
                    }else {
                        this.$message("删除失败");
                        this.loadPage(1);
                    }
                })
            }
        },
        mounted(){
            this.loadPage(1);
            //填充下拉栏--省
        }
    })
</script>
</html>